<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <script src="../js/vue3.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/element-plus.js"></script>
    <script src="../js/icons-vue.js"></script>
    <script src="../js/zh-cn.js"></script>
    <link rel="stylesheet" href="../css/index.css"/>
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            v-loading="loading"
            element-loading-text="数据加载中..."
            element-loading-spinner="el-icon-loading"
            style="width: 100%">

        <el-table-column prop="id" label="编号" width="100" sortable></el-table-column>
        <el-table-column prop="username" label="角色名称"></el-table-column>
        <el-table-column label="操作" width="300" fixed="right">
            <template #default="scope">
                <el-button
                        size="small"
                        type="primary"
                        :icon="Edit"
                        @click="handleEdit(scope.row)">
                    编辑
                </el-button>
                <el-button
                        size="small"
                        type="danger"
                        :icon="Delete"
                        @click="handleDelete(scope.row)">
                    删除
                </el-button>
                <el-button
                        size="small"
                        type="warning"
                        :icon="User"
                        @click="getRole(scope.row)">
                    分配权限
                </el-button>
            </template>
        </el-table-column>
    </el-table>


    <el-dialog
            v-model="dialogVisible"
            title="成员选择"
            width="80%"
            top="5vh"
    >

            <el-form
                    :model="form"
                    :rules="rules"
                    ref="roleFormRef"
                    label-width="100px"
                    class="role-form"
                    status-icon
            >
                <el-form-item label="name" prop="username">
                    <el-input
                            v-model="form.username"
                            placeholder="请输入角色名称"
                            clearable></el-input>
                </el-form-item>
            </el-form>
        <template #footer>
                    <el-button @click="closeDialog">取消</el-button>
                    <el-button type="primary" @click="confirmSelection">确认</el-button>
        </template>
    </el-dialog>

<!--树形选择弹窗-->
    <el-dialog title="新增/修改用户" v-model="dialogVisible1" width="600px">
        <!-- 角色选择表格 -->
        <el-table :data="tableData1" @selection-change="handleSelectionChange" ref="multipleTableRef" border style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="roleName" label="角色名称" width="150"></el-table-column>
            <el-table-column prop="roleCode" label="角色编码" width="200"></el-table-column>
        </el-table>
        <!-- 底部按钮 -->
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </span>
        </template>
    </el-dialog>
    <!--    分页组件-->
    <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[2, 4, 6, 8]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
    </el-pagination>


</div>
<script>
    const {createApp, ref, computed, onMounted, nextTick} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;
    createApp({
        setup() {
            // 拿到数据
            onMounted(() => {
                // 模拟API调用延迟
                getUser();
            });
            // 表格数据
            const tableData = ref([])
            const total = ref(1);
            const currentPage = ref(1)
            const pageSize = ref(2)

            // 处理分页大小变化
            const handleSizeChange = (val) => {
                pageSize.value = val;
                getUser();
            };

            // 处理当前页变化
            const handleCurrentChange = (val) => {
                currentPage.value = val;
                getUser();
            };
            const getUser = () => {
                axios.get(`/user/${currentPage.value}/${pageSize.value}`).then(resp => {
                    //将返回searchQuery.value回来的集合数据赋值给表格绑定的数据源变量
                    //   resp.data   Result(obj:自己的集合数据)
                    console.log(resp.data)
                    tableData.value = resp.data.data.list;
                    total.value = resp.data.data.total;
                }).catch(error => {
                    console.log(error);
                    console.log("网络繁忙，请稍后再试")
                })
            }
            // 编辑操作
            const data = (msg) => {
                ElMessage.success(msg);
                getUser();
                form.value = {}
                dialogVisible.value = false
            }
            const form = ref([])
            const dialogVisible = ref(false)
            const title = ref("修改用户")
            const handleEdit = (row) => {
                axios.get(`/user/getUserById/${row.id}`)
                    .then(resp => {
                        form.value = resp.data.data;
                        dialogVisible.value = true; // 显示弹窗
                        title.value = ref("修改业主")
                    })
                    .catch(error => {
                        ElMessage.error(error.response.data.msg);
                    })
            }
            // /修改
            const updateUser = () => {
                axios.put("/user", form.value).then(resp => {
                    // 判断resp.data 是否大于1，如果大于1 则修改成功，刷新页面，关闭弹窗
                    if (resp.data.code === 200) {
                        data(resp.data.msg);
                    } else {
                        ElMessage.error(error.response.data.msg)
                    }
                })
            }
            const submitForm = () => {
                updateUser();
            }
            // 删除操作
            const handleDelete = (row) => {
                ElMessageBox.confirm(`确定要删除用户吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',

                }).then(() => {
                    // let mid = row.buildingId;
                    axios.delete(`/user/deleteById/${row.id}`).then(resp => {
                        if (resp.data.code === 200) {
                            ElMessage.success(resp.data.msg);
                            getUser();
                        } else {
                            alert("删除失败")
                        }
                    }).catch(error => {
                        ElMessage.error(error.response.data.msg);
                    })
                })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '取消删除',
                        })
                    })
            }
            // 分配角色
            const dialogVisible1 = ref(false);
            let multipleTableRef = ref(null);
            const tableData1 = ref([])
            const uid = ref('')
            const getRole = (row) => {
                axios.get(`/role/getRole/${row.id}`).then(resp => {
                    //将返回searchQuery.value回来的集合数据赋值给表格绑定的数据源变量
                    //   resp.data   Result(obj:自己的集合数据)
                    uid.value = row.id
                    console.log(resp.data)
                    tableData1.value = resp.data.data;
                    dialogVisible1.value = true;
                    nextTick(() => {
                        tableData1.value.forEach(role => {
                            if (role.flg) {
                                multipleTableRef.value?.toggleRowSelection(role, true);
                            }
                        })
                    })
                })
            }
            //批量获取多选框
            const ids = ref([]);
            const handleSelectionChange = (val) => {
                ids.value = val.map(item => item.id)
            }
            const confirmSelection = () => {
                axios.post(`/role/savaRoleByUid/${uid.value}`, ids.value)
                    .then(resp => {
                        console.log(resp.data)
                        ElMessage.success(resp.data.msg)
                        dialogVisible1.value = false
                    })
            }


            const closeDialog = () => {
                dialogVisible1.value = false;
            }
            return {
                confirmSelection,
                handleSelectionChange,
                closeDialog,
                dialogVisible1,
                getRole,
                tableData1,
                tableData,
                handleEdit,
                getUser,
                total,
                currentPage, pageSize, handleSizeChange, handleCurrentChange, handleDelete, form
                , dialogVisible, title, updateUser, submitForm, multipleTableRef,
            }
        }
    }).use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    }).mount('#app');
</script>
</body>
</html>